<template>
  <section>
    <div class="top">
      <p>{{ activity.title }}</p>
    </div>
    <div class="wrapper">
      <div class="caption">
        <p>
          <van-icon name="clock-o" size="16" /><span
            >{{ activity.startTime }} 至 {{ activity.endTime }}</span
          >
        </p>
        <p>
          <van-icon name="location-o" size="16" /><span>{{
            activity.address
          }}</span>
        </p>
        <p>
          <van-icon name="friends-o" size="16" /><span
            >已报名 {{ activity.enterNum }} / {{activity.limitNum?'限报名':'不限'}}
            {{ activity.limitNum }}</span
          >
        </p>
      </div>
      <h2>活动简介</h2>
      <div class="content">
        {{ activity.introduce }}
      </div>
    </div>
  </section>
</template>
<script>
import api from "@/data/api/index.js";
import Vue from "vue";
import { Icon } from "vant";

Vue.use(Icon);

export default {
  data() {
    return {
      id: "", //活动id
      activity: {}, //活动详情
    };
  },
  methods: {
    getActivityDetail(id) {
      api.activityDetail(id).then((res) => {
        this.activity = res;
      });
    },
  },
  mounted() {
    this.id = this.$route.query.tdata;
    this.getActivityDetail(this.id);
  },
};
</script>
<style lang="scss" scoped>
section {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100vh - 46px) ;
  > p {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 15px;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    text-align: center;
    background-color: #9e0f16;
    border-radius: 25px;
  }
}
.top {
  padding: 30px 25px 90px;
  background: #931116 url(../imgs/activity-bg.png) no-repeat right bottom;
  background-size: contain;
  p {
    height: 70px;
    line-height: 35px;
    color: #fff;
    font-size: 25px;
    display: flex;
    align-items: center;
  }
}
.wrapper {
  position: absolute;
  top: 166px;
  left: 0;
  right: 0;
  bottom:20px;
  overflow: auto;
  padding: 20px;
  border-top-left-radius: 50px;
  background-color: #fff;
  > h2 {
    position: relative;
    display: inline-block;
    font-size: 24px;
    margin: 0 0 15px 10px;
    z-index: 1;
    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 1px;
      height: 5px;
      background-color: #c9151e;
      z-index: -1;
    }
  }
  .caption {
    margin: 0 0 10px 8px;
    p {
      display: flex;
      align-items: center;
      line-height: 1.75em;
      color: #666;
      span {
        margin-left: 10px;
      }
    }
  }
  .content {
    line-height: 1.75em;
    font-size: 15px;
    text-indent: 2em;
    text-align: justify;
    p {
      margin: 1em 0;
    }
  }
}
</style>
